<template>
  <el-container style="height: 100%; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu default-active="2" class="el-menu-vertical-demo">
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">图书管理</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">报表处理</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">违规信息</span>
        </el-menu-item>

        <el-menu-item index="5">
          <i class="el-icon-document"></i>
          <span slot="title">借阅证管理</span>
        </el-menu-item>

        <el-menu-item index="6">
          <i class="el-icon-star-on"></i>
          <span slot="title">图书推荐管理</span>
        </el-menu-item>

        <el-menu-item index="7">
          <i class="el-icon-shopping-cart-full"></i>
          <span slot="title">图书购买管理</span>
        </el-menu-item>

      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="text-align: right;">
        <appbar></appbar>
      </el-header>
      <el-main>
        <v-card style="padding-left: 20px;">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="font-size:large;">
            <el-tab-pane label="图书管理" name="first">图书管理</el-tab-pane>
            <el-tab-pane label="报表处理" name="second">报表处理</el-tab-pane>
            <el-tab-pane label="违规信息" name="third">违规信息</el-tab-pane>
          </el-tabs>
          <div style="height:30px"></div>
          <div v-if="this.bookmanage">
            <div style="height: 40px;">
              <v-btn depressed color="primary" @click="dialogVisible = true">添加图书</v-btn>
              <el-dialog title="添加图书" :visible.sync="dialogVisible" :footer-direction="'end'">
                <el-card>
                  <el-form ref="form1" :model="form1">
                    <el-form-item label="书名" prop="book_name" :rules="[{
                    required: true,
                    message: '请输入图书名称',
                    trigger: 'blur'
                  }]">
                      <el-input v-model="form1.book_name"></el-input>
                    </el-form-item>
                    <el-form-item label="作者" prop="author" :rules="[{
                    required: true,
                    message: '请输入作者',
                    trigger: 'blur'
                  }]">
                      <el-input v-model="form1.author"></el-input>
                    </el-form-item>
                    <el-form-item label="出版社" prop="publisher" :rules="[{
                    required: true,
                    message: '请输入出版社',
                    trigger: 'blur'
                  }]">
                      <el-input v-model="form1.publisher"></el-input>
                    </el-form-item>
                    <el-form-item label="出版时间" :rules="[{
                    required: true,
                    message: '请选择出版时间',
                    trigger: 'change'
                  }]">
                      <el-date-picker v-model="form1.publish_time" type="date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="书籍类型" prop="book_type" :rules="[{
                    required: true,
                    message: '请输入书籍类型',
                    trigger: 'blur'
                  }]">
                      <el-input v-model="form1.book_type"></el-input>
                    </el-form-item>
                    <el-form-item label="标签号" prop="isbn" :rules="[{
                    required: true,
                    message: '请输入标签号',
                    trigger: 'blur'
                  }]">
                      <el-input v-model="form1.isbn"></el-input>
                    </el-form-item>
                    <el-form-item label="价格" prop="price" :rules="[{
                    required: true,
                    message: '请输入价格',
                    trigger: 'blur'
                  }]">
                      <el-input v-model="form1.price"></el-input>
                    </el-form-item>
                  </el-form>
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="addBook">添加</el-button>
                </el-card>
              </el-dialog>
              <v-btn depressed color="primary" style="left: 5px;" @click="dialogVisible1 = true">删除图书</v-btn>
              <el-dialog :visible.sync="dialogVisible1" title="批量删除图书" width="30%">
                <template>
                  <div>
                    <v-data-table :headers="headers" :items="desserts">
                      <template v-slot:item.iron="props">
                        <v-edit-dialog :return-value.sync="props.item.iron" large persistent @save="save" @cancel="cancel" @open="open" @close="close">
                          <div>{{ props.item.iron }}</div>
                          <template v-slot:input>
                            <div class="mt-4 text-h6">
                              请输入要删除的读书的标签号
                            </div>
                            <v-text-field v-model="props.item.iron" :rules="[max25chars]" label="isbn" single-line counter autofocus></v-text-field>
                          </template>
                        </v-edit-dialog>
                      </template>
                    </v-data-table>

                    <v-snackbar v-model="snack" :timeout="3000" :color="snackColor">
                      {{ snackText }}

                      <template v-slot:action="{ attrs }">
                        <v-btn v-bind="attrs" text @click="snack = false">
                          关闭
                        </v-btn>
                      </template>
                    </v-snackbar>
                  </div>
                </template>
                <template #footer>
                  <el-button type="primary" @click="deleteBooks" class="deletebutton">删除</el-button>
                </template>
              </el-dialog>
            </div>
            <booktable :tableData="this.bookData"></booktable>
          </div>
          <tablemanage v-if="this.tablemanagestate" :books="this.bookData"></tablemanage>
        </v-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import axios from "axios";
import appbar from "../components/app-bar.vue";
import booktable from "../components/table/bookadmintable.vue";
import tablemanage from "../components/table/tablemanage.vue";
export default {
  name: "index",
  components: {
    appbar: appbar,
    booktable: booktable,
    tablemanage: tablemanage,
  },
  methods: {
    //tab切换
    handleClick() {
      if (this.activeName == "first") {
        this.bookmanage = true;
        this.tablemanagestate = false;
        this.msgmanage = false;
      } else if (this.activeName == "second") {
        this.bookmanage = false;
        this.tablemanagestate = true;
        this.msgmanage = false;
      } else {
        this.bookmanage = false;
        this.tablemanagestate = false;
        this.msgmanage = true;
      }
    },
    save() {
      this.snack = true;
      this.snackColor = "success";
      this.snackText = "保存成功";
    },
    cancel() {
      this.snack = true;
      this.snackColor = "error";
      this.snackText = "已撤销更改";
    },
    open() {
      this.snack = true;
      this.snackColor = "info";
      this.snackText = "对话框";
    },
    close() {
      console.log("对话框已关闭");
    },
    openDialog() {
      // 打开 dialog 前需要先清空 isbnList
      this.isbnList = [];
      this.dialogVisible = true;
    },
    //删除书籍
    deleteBooks() {
      // 批量删除图书
      // 发送请求到后端，传递 this.isbnList
      // ...
      const isbnList = this.desserts.map((item) => item.iron); // 获取选中的isbn号列表
      axios({
        method: "post",
        url: this.$root.businessServer + "bookInfo/deleteBooks",
        data: { isbnList: isbnList },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
        .then((res) => {
          // 删除成功后，清空isbnList，关闭弹窗
          this.isbnList = [];
          this.dialogVisible1 = false;
          // 提示删除成功
          this.$message.success("删除成功");
        })
        .catch((error) => {
          // 提示删除失败
          this.$message.error("删除失败");
        });
    },
    //添加书籍
    addBook() {
      console.log(this.form1);
      // 处理添加图书的逻辑
      axios({
        method: "post",
        url: this.$root.businessServer + "bookInfo/addBook",
        data: this.form1,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      })
        .then((response) => {
          if (response.data.status == "200") {
            if (response.data.responsemsg == "success") {
              this.form1.book_name = "";
              this.form1.author = "";
              this.form1.publisher = "";
              this.form1.publish_time = "";
              this.form1.book_type = "";
              this.form1.isbn = "";
              this.form1.price = "";
              this.dialogVisible = false;
              // 提示删除成功
              this.$message.success("添加成功");
              // alert("您已经成功添加图书");
            }
          }
        })
        .catch((error) => {
          this.$message.error("添加失败");
        });
      console.log(this.form);
    },
  },
  created() {
    axios({
      method: "post",
      url: this.$root.businessServer + "bookInfo/getAllBookInfo",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    })
      .then((response) => {
        this.bookData = response.data;
        this.bookmanage = false;
        console.log(this.bookData);
      })
      //Promise解决props传值局部刷新的问题，等待消息队列异步执行完成后的数据挂载，局部刷新组件的显示
      .then(() => {
        this.bookmanage = true;
      })
      .catch((error) => {});
  },

  data: () => {
    return {
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      activeName: "first",
      bookmanage: true,
      tablemanagestate: false,
      msgmanage: false,
      bookData: [],
      dialogVisible: false,
      dialogVisible1: false,
      props: {
        isbnList: {
          type: Array,
          default: () => [],
        },
      },
      form1: {
        book_name: "",
        author: "",
        publisher: "",
        publish_time: "",
        book_type: "",
        isbn: "",
        price: "",
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          status: "红色",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
          status: "红色",
          time: "now",
          you: "c",
          i: "q",
          h: "y",
          s: "cqy",
          w: "love",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
          status: "红色",
          time: "now",
          you: "c",
          i: "q",
          h: "y",
          s: "cqy",
          w: "love",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
          status: "蓝色",
          time: "now",
          you: "c",
          i: "q",
          h: "y",
          s: "cqy",
          w: "love",
        },
      ],
      snack: false,
      snackColor: "",
      snackText: "",
      max25chars: (v) => v.length <= 25 || "输入的字数太长!",
      pagination: {},
      headers: [{ text: "标签号", value: "iron" }],
      desserts: [
        {
          iron: null,
        },
        {
          iron: null,
        },
        {
          iron: null,
        },
        {
          iron: null,
        },
        {
          iron: null,
        },
        {
          iron: null,
        },
        {
          iron: null,
        },
        {
          iron: null,
        },
        {
          iron: null,
        },
        {
          iron: null,
        },
      ],
    };
  },
  watch: {
    group() {
      this.drawer = false;
    },
  },
};
</script>

<style  scoped>
.left_fit {
  height: 100%;
  width: 250px;
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.cancel-button {
  margin-right: 20px;
}

.add-button {
  background-color: #409eff;
  border-color: #409eff;
}
.deletebutton {
  width: 150px;
}
</style>